<template>
  <div class="mod-config">
    <el-form  :model="dataForm" label-width="100px">
      <el-card style="width: 100%;" shadow="hover">
        <div slot="header" class="clearfix">
          <span>查询条件</span>
        </div>
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="区县" prop="county">
              <el-select v-model="dataForm.county" placeholder="安置区县"  clearable @change="dataArea($event,'AREA')" :style="{ width: '60%' }">
                <el-option
                  v-for="item in countyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>   
              </el-form-item>    
            </el-col>
            <el-col :span="12">
              <el-form-item label="街道" prop="street">
              <el-select v-model="dataForm.street" filterable placeholder="街道名称"  :style="{ width: '60%' }" clearable >
                <el-option
                  v-for="item in streetList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>  
              </el-form-item>     
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="病故起始日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.deathTime1" value-format="yyyy-MM-dd" :style="{ width: '80%' }"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.deathTime2" value-format="yyyy-MM-dd" :style="{ width: '80%' }"></el-date-picker>
              </el-col>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="注销起始日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.logoutDate1" value-format="yyyy-MM-dd" :style="{ width: '80%' }"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.logoutDate2" value-format="yyyy-MM-dd" :style="{ width: '80%' }"></el-date-picker>
              </el-col>
            </el-form-item>
            </el-col>  
          </el-row>       
        </div>
      </el-card>    
      <el-row style="margin-bottom:12px;margin-top:12px">
        <el-col :span="12">  
            <el-button @click="getSearchDataList()">查询</el-button>
            <el-button  type="primary" @click="exportData()">导出</el-button>
           
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="personalCode"
        header-align="center"
        align="center"
        label="个人编码"
        width="140">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="sex"
        header-align="center"
        align="center"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="idNo"
        header-align="center"
        align="center"
        label="身分证号码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="county"
        header-align="center"
        align="center"
        label="区县"
        width="140">
      </el-table-column>
      <el-table-column
        prop="street"
        header-align="center"
        align="center"
        label="街道、乡镇"
        width="140">
      </el-table-column>
      <el-table-column
        prop="deathTime"
        header-align="center"
        align="center"
        label="死亡时间"
        width="140">
      </el-table-column>
      <el-table-column
        prop="logoutDate"
        header-align="center"
        align="center"
        label="注销日期"
        width="140">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        show3: false,
        countyList: [],
        streetList: [],
        dataForm: {
          key: '',
          street: '',
          county: '',
          deathTime1: '',
          deathTime2: '',
          logoutDate1: '',
          logoutDate2: ''
        },
        exportList:[],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
      }
    },
    activated () {
      this.getDataList()
      //this.getName()
    },
    created(){
      this.dataSex('AREA')
    },

    methods: {
      // 获取数据列表
      getDataList () {
        // alert(this.dataForm.name);
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/jxxm/oldworker/listDeath'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'deathTime1':this.dataForm.deathTime1 || "",
            'deathTime2':this.dataForm.deathTime2 || "",
            'logoutDate1':this.dataForm.logoutDate1 || "",
            'logoutDate2':this.dataForm.logoutDate2 || "",
            'county':this.dataForm.county,
            'street':this.dataForm.street

          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 获取查询数据列表
      getSearchDataList () {
        // alert(this.dataForm.name);
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/jxxm/oldworker/searchListDeath'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10,
            'deathTime1':this.dataForm.deathTime1 || "",
            'deathTime2':this.dataForm.deathTime2 || "",
            'logoutDate1':this.dataForm.logoutDate1 || "",
            'logoutDate2':this.dataForm.logoutDate2 || "",
            'county':this.dataForm.county,
            'street':this.dataForm.street

          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },

      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      exportData(){
          this.$http({
          url: this.$http.adornUrl('/jxxm/oldworker/listDeathExcel'),
          method: 'get',
          params: this.$http.adornParams({
            'deathTime1':this.dataForm.deathTime1 || "",
            'deathTime2':this.dataForm.deathTime2 || "",
            'logoutDate1':this.dataForm.logoutDate1 || "",
            'logoutDate2':this.dataForm.logoutDate2 || "",
            'county':this.dataForm.county,
            'street':this.dataForm.street

          })
        }).then(({data}) => {     
          if (data && data.code === 0) {
              this.exportList = data.list
              this.export2Excel()
          } else if (data && data.code === 40190) {
              this.$Message.info('数据太多无法导出，请联系客服！')
          }
        })  
      },
      export2Excel() {
          require.ensure([], () => {
          const Export2Excel2 = require('../../../../static/excel/Export2Excel.js');
          const tHeader = ['个人编码', '姓名', '性别', '身份证号', '区县','街道','死亡时间','注销日期'];
          const filterVal = ['personalCode', 'name', 'sex', 'idNo', 'county','street','deathTime','logoutDate'];
          const list = this.exportList;
          const data = this.formatJson(filterVal, list);
          Export2Excel2.export_json_to_excel(tHeader, data, '病故人员信息');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      dataSex(type){
         this.$http({
            url: this.$http.adornUrl("/sys/dict/select/"+type),
            method: "get",
            params: this.$http.adornParams(),
            })
            .then(({ data }) => {      
                this.countyList = data && data.code === 0 ? data.list : [];  
            })
      },
      //地区联动专用
      dataArea(val,type){
     
         this.$http({
            url: this.$http.adornUrl("/sys/dict/select/"+type),
            method: "get",
            params: this.$http.adornParams(),
            })
            .then(({ data }) => {
                if (type == "AREA") {
                  this.countyList = data && data.code === 0 ? data.list : [];
                }
                this.$http({
                  url: this.$http.adornUrl("/sys/dict/secondary/"+val),
                  method: "get",
                  params: this.$http.adornParams(),
                  }).then(({ data }) => {                 
                      if (type == "AREA") {
                      this.dataForm.street = null;
                      this.streetList = data && data.code === 0 ? data.list : [];
                    }
                     
                  })
            })
      },
    }
  }
</script>
